<template>
  <div class="personal">
    <div class="avatar">
      <p>修改头像</p>
      <van-uploader v-model="fileList" multiple />
    </div>
    <div class="gender">
      <p>编辑性别</p>
      <input
        type="text"
        placeholder="请输入性别"
        v-model="personalObj.gender"
      />
    </div>
    <div class="nickname">
      <p>编辑喜好</p>
      <input
        type="text"
        v-model="personalObj.nickname"
        placeholder="请输入喜好"
      />
    </div>
    <div class="phone">
      <p>编辑电话</p>
      <input type="text" v-model="personalObj.phone" placeholder="请输入电话" />
    </div>
    <div class="submit">
      <button @click="$router.go(-1)">取消</button>
      <button @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      personalObj: {
        avatar: "",
        gender: "",
        nickname: "",
        phone: "",
      },
      fileList: [],
    };
  },
  methods: {
    submit() {
      this.$router.go(-1);
      console.log(this.personalObj);
    },
  },
};
</script>

<style scoped>
.avatar > p,
.gender > p,
.nickname > p,
.phone > p {
  color: #21b97a;
  background-color: #fff;
  font-size: 15px;
  padding: 15px 15px 9px;
  width: 100%;
  margin: 5px 0;
}
.avatar > input,
.gender > input,
.nickname > input,
.phone > input {
  width: 100%;
  outline: none;
  padding: 0 10px;
  border: 0;
  border-bottom: 1px solid #ccc;
}
.van-uploader {
  padding: 10px;
}
.submit {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.submit button {
  padding: 10px 15px;
  outline: none;
  border: 1px solid #ccc;
  background: 0;
}
</style>